<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">{{ action | titlecase }} RGW Encryption Configurations</ng-container>

  <ng-container class="modal-content">
    <form name="configForm"
          #frm="ngForm"
          [formGroup]="configForm">
    <div class="modal-body">
      <div class="form-group row">
        <label class="cd-col-form-label required"
               for="encryptionType"
               i18n>Encryption Type</label>
        <div class="col-md-auto custom-checkbox form-check-inline ms-3">
          <input class="form-check-input"
                 formControlName="encryptionType"
                 id="s3Enabled"
                 type="radio"
                 name="encryptionType"
                 (change)="checkKmsProviders()"
                 [attr.disabled]="editing && configForm.getValue('encryptionType') !== 'AES256' ? true : null"
                 value="AES256">
          <label class="custom-check-label"
                 [ngClass]="{'text-muted': editing && configForm.getValue('encryptionType') !== 'AES256'}"
                 for="s3Enabled"
                 i18n>SSE-S3</label>
        </div>

        <div class="col-md-auto custom-checkbox form-check-inline">
          <input class="form-check-input"
                 formControlName="encryptionType"
                 id="kmsEnabled"
                 name="encryptionType"
                 (change)="checkKmsProviders()"
                 value="aws:kms"
                 [attr.disabled]="editing && configForm.getValue('encryptionType') !== 'aws:kms' ? true : null"
                 type="radio">
          <label class="custom-check-label"
                 [ngClass]="{'text-muted': editing && configForm.getValue('encryptionType') !== 'aws:kms'}"
                 for="kmsEnabled"
                 i18n>SSE-KMS</label>
        </div>
      </div>

      <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="kms_provider"
                 i18n>Key management service provider</label>
          <div class="cd-col-form-input">
            <select id="kms_provider"
                    name="kms_provider"
                    class="form-select"
                    formControlName="kms_provider">
              <option *ngIf="kmsProviders !== null && kmsProviders.length === 0"
                      ngValue="null"
                      i18n>-- No kms providers available --</option>
              <option *ngIf="kmsProviders !== null && kmsProviders.length > 0"
                      ngValue=""
                      i18n>-- Select a provider --</option>
              <option *ngFor="let provider of kmsProviders"
                      [value]="provider">{{ provider }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="configForm.showError('kms_provider', frm, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>
      </div>

      <div *ngIf="kmsProviders.length !== 0 && configForm.getValue('kms_provider') !== ''">
        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="auth_method"
                   i18n>Authentication Method</label>
            <div class="cd-col-form-input">
              <select id="auth_method"
                      name="auth_method"
                      class="form-select"
                      formControlName="auth_method">
                <option *ngFor="let auth_method of authMethods"
                        [value]="auth_method">{{ auth_method }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('auth_method', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="secret_engine"
                   i18n>Secret Engine</label>
            <div class="cd-col-form-input">
              <select id="secret_engine"
                      name="secret_engine"
                      class="form-select"
                      formControlName="secret_engine">
                <option *ngFor="let secret_engine of secretEngines"
                        [value]="secret_engine">{{ secret_engine }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('secret_engine', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="secret_path"
                   i18n>Secret Path
            </label>
            <div class="cd-col-form-input">
              <input id="secret_path"
                     name="secret_path"
                     class="form-control"
                     type="text"
                     formControlName="secret_path">
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('secret_path', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="namespace"
                   i18n>Namespace
            </label>
            <div class="cd-col-form-input">
              <input id="namespace"
                     name="namespace"
                     class="form-control"
                     type="text"
                     formControlName="namespace">
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="address"
                   i18n>Vault Address
            </label>
            <div class="cd-col-form-input">
              <input id="address"
                     name="address"
                     class="form-control"
                     formControlName="address"
                     placeholder="http://127.0.0.1:8000">
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('address', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('auth_method') === 'token'"
             class="form-group row">
          <label class="cd-col-form-label required"
                 for="token">
          <span i18n>Token</span>
          <cd-helper i18n>
            The token authentication method expects a Vault token to be present in a plaintext file.
          </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <input type="file"
                   formControlName="token"
                   (change)="fileUpload($event.target.files, 'token')">
            <span class="invalid-feedback"
                  *ngIf="configForm.showError('token', frm, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="ssl_cert">
            <span i18n>CA Certificate</span>
            <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
            </label>
            <div class="cd-col-form-input">
              <input type="file"
                     formControlName="ssl_cert"
                     (change)="fileUpload($event.target.files, 'ssl_cert')">
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('ssl_cert', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="client_cert">
            <span i18n>Client Certificate</span>
            <cd-helper i18n>The Client certificate in PEM format.</cd-helper>
            </label>
            <div class="cd-col-form-input">
              <input type="file"
                     formControlName="client_cert"
                     (change)="fileUpload($event.target.files, 'client_cert')">
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('client_cert', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <div *ngIf="configForm.getValue('encryptionType') === 'aws:kms' || configForm.getValue('encryptionType') === 'AES256'">
          <div class="form-group row">
            <label class="cd-col-form-label"
                   for="client_key">
            <span i18n>Client Private Key</span>
            <cd-helper i18n>The Client Private Key in PEM format.</cd-helper>
            </label>
            <div class="cd-col-form-input">
              <input type="file"
                     (change)="fileUpload($event.target.files, 'client_key')">
              <span class="invalid-feedback"
                    *ngIf="configForm.showError('client_key', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <cd-form-button-panel (submitActionEvent)="onSubmit()"
                            [submitText]="actionLabels.SUBMIT"
                            [form]="configForm"></cd-form-button-panel>
    </div>
    </form>
  </ng-container>
</cd-modal>
